<script setup>
// 37分钟
import { onMounted, ref, onBeforeUnmount, computed, watch } from 'vue';
import useEmo from '@/hooks/useEmo'
import V3Emoji from "vue3-emoji";
import "vue3-emoji/dist/style.css"
import { useUserStore } from '@/store/user';
import { ElMessage } from 'element-plus'
import { addPostApi } from '@/apis/post'
import { getCategory } from '@/apis/category'


const useStore = useUserStore()

const { onVue3Emoje, optionsName, content } = useEmo()

// #region 上传图片相关

// 上传图片的列表
const fileList = ref([])

//删除方法
const handleRemove = (file) => {

  const index = fileList.value.indexOf(file);
  if (index !== -1) {
    fileList.value.splice(index, 1);
  }

  //调用删除图片的接口，直接去数据库将这个url删掉即可
}


// 上传图片成功的方法
const handleSuccess = (res, file, fileList) => {
  console.log(res);

  //成功方法会把展示的file数据和后台返回的数据都拿到
  file.url = res.data
  try {
    fileList.value.push(file)

    console.log(fileList.value);

  } catch (error) {
    // console.log(error)
  }
}

//上传图片时的检查
const handleBeforeUpload = (file) => {
  if (file.type !== 'image/gif' && file.type !== 'image/jpg' && file.type !== 'image/jpeg' && file.type !== 'image/png') {
    ElMessage.error('请上传jpg/jpeg/png/gif格式图片!')
    return false
  } else if (file.size / 1024 / 1024 > 3) {
    ElMessage.error('图片超过3MB!')
    return false
  }

}

// #endregion



// #region 标签 与 标题 相关代码
// 标签
const selected = ref('')

// 标题
const title = ref('');

// 多选框数据
const options = ref([])


// #endregion



// #region 清除 与 发布事件
const clear = () => {
  content.value = ''
}

const publish = async () => {
  // 检查标题与多选框是否合法
  if (title.value === '') {
    ElMessage.error('请填写标题!')
    return
  }
  if (selected.value === '') {
    ElMessage.error('请选择标签!')
    return
  }
  if (content.value === '') {
    ElMessage.error('请填写内容!')
    return
  }

  // 图片列表
  const imgList = fileList.value.map(item => item.url)


  // 调用发布接口
  const res = await addPostApi({
    title: title.value,
    content: content.value,
    categoryId: selected.value,
    userId: useStore.userInfo.id,
    imgList: imgList
  })

  // 调用获取经验接口，因为发布成功了，给自己加经验
  useStore.getExperience(res.data.id)

  ElMessage({
    type: 'success',
    message: res.data
  })

  title.value = ''
  selected.value = ''
  content.value = ''
  fileList.value = []
}

// #endregion



onMounted(async () => {
  // 获取分类数据
  const res = await getCategory()
  options.value = res.data
})


//emo动态
const emojiSize = computed(() => {
  return window.innerWidth < 768 ? 'small' : 'big'
})


</script>

<template>
  <div class="container">

    <div class="top">
      <!-- 标题输入框 -->
      <el-input class="title" v-model="title" autofocus maxlength="40" show-word-limit placeholder="请输入标题"></el-input>
      <!-- 标签多选框 -->
      <el-select v-model="selected" class="select" placeholder="选择标签" size="large" style="">
        <el-option v-for="item in options" :key="item.id" :label="item.categoryName" :value="item.categoryId" />
      </el-select>
    </div>

    <div class=" image">
      <el-upload action="http://8.134.78.60:8080/user/common/upload" :headers="{ token: useStore.token }" name="file"
        list-type="picture-card" :auto-upload="true" :before-upload="handleBeforeUpload" :on-success="handleSuccess"
        v-model:file-list="fileList" :data="{ type: 'reply' }" :limit="5">
        <svg-icon name="tupian"></svg-icon>

        <template #file="{ file }">
          <div>
            <img class="el-upload-list__item-thumbnail" :src="file.url" alt="" />
            <span class="el-upload-list__item-actions">


              <span v-if="!disabled" class="el-upload-list__item-delete" @click="handleRemove(file)">
                <el-icon>
                  <Delete />
                </el-icon>
              </span>
            </span>
          </div>
        </template>


      </el-upload>
      <div class="limit">
        <span>{{ fileList.length }} / 5</span>
      </div>

      <!-- 表情包组件 -->
      <V3Emoji v-model="comment" :options-name="optionsName" :textArea="true" class="emoji" @click-emoji="onVue3Emoje"
        :recent="true" :size="emojiSize" fixPos='top' :max="30">
      </V3Emoji>

    </div>

    <div class="content">
      <el-input type="textarea" style="font-size: 20px;" :rows="14" resize="none" v-model="content" class="textarea"
        placeholder="请输入内容(300字以内)"></el-input>
    </div>


    <div class="bottom">
      <el-button type="info" icon="delete" class="delete" @click="clear">清除</el-button>
      <el-button type="danger" icon="upload" class="publish" @click="publish">发布</el-button>

    </div>


    <!-- 底部信息 -->
    <!-- <foot-info></foot-info> -->
  </div>
</template>


<style lang="scss" scoped>
//电脑端样式
@media screen and (min-width: 768px) {
  .container {
    padding-top: $tarBar-height;
    height: 100vh;

    .top {

      .title {
        height: 40px;
        margin: 40px 0 20px 0;
        width: 70%;
      }

      .select {
        margin: 20px 0 0 30px;
        // border: 1px solid rgb(120, 101, 101);
        width: 240px;
      }
    }

    .image {
      display: flex;
      align-items: center;

      // 上传图片的样式   点击框的样式 
      ::v-deep .el-upload--picture-card {
        width: 50px;
        height: 50px;
        line-height: 50px;
        border: none;
      }

      //上传图片的样式     图片的样式
      ::v-deep .el-upload-list--picture-card .el-upload-list__item {
        width: 50px !important;
        height: 50px !important;
      }

      .emoji {
        // border: 1px solid red;
        margin-left: 10px;
        width: 30px;
        margin-bottom: 8px;


      }



    }




    .bottom {
      display: flex;
      justify-content: flex-end;
      margin-top: 20px;
      margin-bottom: 80px;
      // border: 1px solid red;

      .publish {
        margin-right: 40px;
        height: 40px;
      }

      .delete {
        margin-right: 30px;
        height: 40px;
      }
    }



  }
}

//移动端样式
@media screen and (max-width: 768px) {
  .container {
    padding-top: $tarBar-height;
    height: 100vh;

    .top {

      .title {
        height: 40px;
        margin: 40px 0 20px 0;
        width: 60vw;
      }

      .select {
        // border: 1px solid red;
        margin: 20px 0 0 20px;
        // border: 1px solid rgb(120, 101, 101);
        width: 30vw;
      }
    }

    .image {
      display: flex;
      align-items: center;

      // 上传图片的样式   点击框的样式 
      ::v-deep .el-upload--picture-card {
        width: 50px;
        height: 50px;
        line-height: 50px;
        border: none;
      }

      //上传图片的样式     图片的样式
      ::v-deep .el-upload-list--picture-card .el-upload-list__item {
        width: 50px !important;
        height: 50px !important;
      }

      .emoji {
        // border: 1px solid red;
        margin-left: 10px;
        width: 30px;
        margin-bottom: 8px;


      }



    }




    .bottom {
      display: flex;
      justify-content: flex-end;
      margin-top: 20px;
      margin-bottom: 80px;
      // border: 1px solid red;

      .publish {
        margin-right: 40px;
        height: 40px;
      }

      .delete {
        margin-right: 30px;
        height: 40px;
      }
    }



  }
}
</style>
